<template>
  <div>
    <!--  -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>面经后台</el-breadcrumb-item>
      <el-breadcrumb-item>面经管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>共{{ total }}条记录</span>
        <el-button
          style="float: right"
          type="primary"
          size="small"
          round
          icon="el-icon-plus"
          @click="addfn"
          >添加按钮</el-button
        >
      </div>
      <el-table :data="articles" stripe border>
        <el-table-column
          type="index"
          label="序号"
          width="100px
        "
          align="center"
        >
        </el-table-column>
        <el-table-column prop="stem" label="标题" align="center">
        </el-table-column>
        <el-table-column prop="creator" label="作者" align="center">
        </el-table-column>
        <el-table-column prop="likeCount" label="点赞" align="center">
        </el-table-column>
        <el-table-column prop="views" label="浏览数" align="center">
        </el-table-column>
        <el-table-column prop="createdAt" label="更新时间" align="center">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="obj">
            <el-button
              type="text"
              icon="el-icon-view"
              align="center"
              @click="lookfn(obj)"
            ></el-button>
            <el-button
              type="text"
              icon="el-icon-edit-outline"
              @click="editfn(obj)"
            ></el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              @click="deletefn(obj)"
            ></el-button> </template
        ></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="params.pageSize"
        :current-page="params.current"
        :total="total"
        @current-change="changeCurrent"
      >
      </el-pagination>
    </el-card>

    <!-- 弹出 -->
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      direction="rtl"
      size="50%"
      @close="closefn"
    >
      <el-form
        :rules="rules"
        :model="from"
        ref="from"
        v-if="this.title != '查看面经'"
      >
        <el-form-item label="标题" label-width="80px" prop="stem">
          <el-input v-model="from.stem"></el-input>
        </el-form-item>
        <el-form-item label="内容" label-width="80px" prop="content">
          <quillEditor
            v-model="from.content"
            @blur="$refs.from.validateField('content')"
          ></quillEditor>
        </el-form-item>
        <el-form-item class="but">
          <el-button type="primary" @click="submit">确认</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
      <!-- 查看 -->
      <div v-else>
        <p v-html="from.stem"></p>
        <p v-html="from.content"></p>
      </div>
    </el-drawer>
    <!-- 富文本 -->
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import {
  getArticleList,
  delArticle,
  getArticleDetail,
  updateArticle,
  AddArticle
} from '@/api/article'
export default {
  name: 'article-page',
  data() {
    return {
      params: {
        current: 1,
        pageSize: 10
      },
      drawer: false,
      articles: [],
      total: null,
      title: '',
      from: {
        stem: '',
        content: ''
      },
      rules: {
        stem: [{ required: true, message: '请输入面经标题', trigger: 'blur' }],
        content: [
          { required: true, message: '请输入面经内容', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    quillEditor
  },
  created() {
    this.getArticleList()
  },
  methods: {
    async getArticleList() {
      const { data } = await getArticleList(this.params)
      this.articles = data.rows
      this.total = data.total
    },
    changeCurrent(val) {
      console.log(val)
      this.params.current = val
      this.getArticleList()
    },
    // 添加
    async addfn() {
      this.title = '添加面经'
      this.drawer = true
    },
    // 关闭
    closefn() {
      this.$refs.from.resetFields()
    },
    // 删除
    async deletefn(obj) {
      // console.log(obj.row.id)
      await delArticle(obj.row.id)
      this.$message.success('删除成功')
      this.getArticleList()
    },
    // 编辑
    async editfn(obj) {
      // console.log(obj)
      this.title = '编辑面经'
      this.drawer = true
      const res = await getArticleDetail(obj.row.id)
      // console.log(res)
      this.from = res.data
    },
    // 查看
    async lookfn(obj) {
      this.title = '查看面经'
      const res = await getArticleDetail(obj.row.id)
      this.from = res.data
      this.drawer = true
    },
    // 取消
    cancel() {
      this.drawer = false
    },
    // 确定
    async submit() {
      try {
        await this.$refs.from.validate()
        // 编辑
        if (this.title === '添加面经') {
          await AddArticle(this.from)
          this.$message.success('添加成功')
        } else {
          const obj = {}
          obj.id = this.from.id
          obj.stem = this.from.stem
          obj.content = this.from.content
          await updateArticle(obj)
          this.$message.success('编辑成功')
        }

        this.getArticleList()
        this.drawer = false
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin-top: 20px;
}
.el-button {
  color: #333;
}
.el-pagination {
  margin-top: 20px;
  text-align: center;
}
::v-deep .el-drawer {
  padding: 20px 20px;
}
::v-deep .ql-editor {
  min-height: 250px;
}
::v-deep .el-input__inner {
  width: 80%;
}
.quill-editor {
  width: 80%;
}
.but {
  margin-left: 80px;
}
</style>
